<template>
  <div class="feedback_box">
    <my-header title="会员注册" :showBack="true"></my-header>
    <div>
      <div class="cus_top">
        <p>总人数</p>
        <p>16人</p>
      </div>
      <!-- 层级导航 -->
      <div class="cus_scro">
        <ul class="cusflow_list">
          <li v-for="items in cusTeamFlow" :key="items.id" @click="getFllowInfo" >
            <p>{{items.teamName}}</p>
            <p>{{items.peonum}}</p>
          </li>
        </ul>
      </div>
    <div class="cus_content">
      <div class="block_top block_box">
        <h3>我</h3>
        <h3 class="block_id"><small>ID</small>29200</h3>
        <p>*** **** 2200</p>
        <span class="jh_type">已激活</span>
      </div>
      <div class="block_bottom">
        <div class="block_botleft block_box">
          <h3>左区</h3>
          <h3 class="block_id"><small>ID</small>29200</h3>
          <p>*** **** 2200</p>
          <span class="jh_type">已激活</span>
        </div>
        <!-- <div class="block_botright block_box">
          <h3>右区</h3>
          <h3 class="block_id"><small>ID</small>29200</h3>
          <p>*** **** 2200</p>
          <span class="jh_type">已激活</span>
        </div> -->
        <div class="block_botright block_box">
          <h4 class="h4"> <span>注册</span> </h4>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import header from "@/components/header";
import { Toast } from "vant";
export default {
  components: {
    "my-header": header
  },
  data() {
    return {
      feedbackValue: "",
      cardinfo:"",
      cardnum:"",
      feedBackTypeList:[],
      tradeId: "",
      feedbackSelect:'',

      feedbackList:[],

      cusTeamFlow:[{teamName:'我',peonum:'总16人',},{teamName:'1层',peonum:'',}
        ,{teamName:'2层',peonum:'',},{teamName:'3层',peonum:'',},{teamName:'4层',peonum:'',}
        ,{teamName:'5层',peonum:'',},{teamName:'6层',peonum:'',},{teamName:'7层',peonum:'',},{teamName:'8层',peonum:'',},{teamName:'9层',peonum:'',}
        ,{teamName:'10层',peonum:'',},{teamName:'11层',peonum:'',}
      ]
    }
  },
  watch:{
    feedbackSelect(val){
      console.log(val);
      
    }
  },
  mounted(){
    // this.getType();
    //this.getCustomerFeedbackList();
  },
  methods: {
    getType(){
      this.$ajax(this.$api.getFeedbackType).then(res=>{
        if(res.code==0){
          this.feedBackTypeList = res.data;
        }
      })
    },
    getFllowInfo(){

    }
  }
};
</script>

<style lang="less" scoped>
.feedback_box{
  background: #f6f6f6;
}
.cus_top{
  display: flex;
  justify-content:space-between;
  padding: 12px 12px;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
}
.cus_content{
  text-align: center;
  margin-top: 10px;
  padding:  0px 12px;
  border-radius: 6px;
}
.block_bottom{
  display: flex;
}
.block_top{
  background: #ffffff;
  margin-bottom: 10px;
  padding: 20px 0;
}
.block_botleft,.block_botright{flex: 1;background: #ffffff;border-radius: 6px;padding: 20px 0;}
.block_botleft{margin-right: 10px;}
.cus_scro{
  box-sizing: border-box;
  overflow-x: scroll;
}
.cusflow_list{
  display: flex;
  white-space: nowrap;
  overflow-x:scroll;
  float:left;
  align-items:center ;
  text-align: center;
  background: #ffffff;
  li{
    width: 100px;
    background: #ffffff;
    padding: 10px 0;
    .active{background: #ffffff;border-bottom: 2px solid #3653d5;}
  }
  li:nth-child(1){background: #ffffff;border-bottom: 2px solid #3653d5;}
}
.block_box{
  position: relative;
  .h4{line-height: 84px;
     span{border-radius:6px;background:rgba(137,4,0,1);color: #ffffff;padding: 6px 10px;}
  }
  .jh_type{
      position: absolute;
      right: 0;
      top: 10px;
      padding: 5px ;
      border-radius: 6px 0 0 6px;
      background: -webkit-linear-gradient(left, rgba(161,2,1,1) , rgba(232,99,76,1)); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, rgba(161,2,1,1), rgba(232,99,76,1)); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right,  rgba(161,2,1,1), rgba(232,99,76,1)); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right,  rgba(161,2,1,1) , rgba(232,99,76,1)); /* 标准的语法 */
      color: #ffffff;
      font-size: 12px;
  }
  p{
    margin-top: 10px;color: #333333;
  }
  small{
    font-size: 12px;color: #999999;font-style: normal;
  }
}
.block_id{
  margin-top: 10px;
}
</style>
